import React from 'react';

import styles from './index.less';

export default class SlideMenus extends React.Component {
  constructor(props) {
    super(props);
    // 暂时默认全部展开
    const expendKey = this.getExpendKey(props.sysmenus);
    this.state = {
      defalutKey: props.value || props.defalutKey,
      expendKey: expendKey,
    };
  }

  shouldComponentUpdate(nextProps) {
    if (
      nextProps.defaultExpendKey &&
      JSON.stringify(nextProps.defaultExpendKey) !== JSON.stringify(this.props.defaultExpendKey)
    ) {
      this.setState({ expendKey: nextProps.defaultExpendKey });
    }
    if (nextProps.value && JSON.stringify(nextProps.value) !== JSON.stringify(this.props.value)) {
      this.setState({ defalutKey: value });
    }
  }

  getExpendKey = sysmenus => {
    const data = [];
    sysmenus.forEach(element => {
      if (element.children) {
        data.push(element.key);
        const keys = this.getExpendKey(element.children);
        data.push(...keys);
      }
    });
    return data;
  };

  selectNode = value => {
    this.setState({ defalutKey: value.key });
    const { onSelect } = this.props;
    onSelect && onSelect(value);
  };

  swith = value => {
    const { key } = value;
    const { expendKey } = this.state;
    const ind = expendKey.indexOf(key);
    if (ind < 0) {
      expendKey.push(key);
    } else {
      expendKey.splice(ind, 1);
    }
    this.setState({ expendKey });
    const { onSelect } = this.props;
    onSelect && onSelect(value);
  };

  renderTreeNodes = data =>
    data.map(item => {
      if (item.children && item.children.length > 0) {
        return (
          <li key={item.key} className={styles.treenode}>
            <div
              className={styles.treenode_parents}
              onClick={() => {
                this.swith(item);
              }}
            >
              <span className={styles.treeIcon}>
                <img src={item.img} />
              </span>
              <span className={styles.treeTitle}>{item.title}</span>
              <span>
                <img
                  className={
                    this.state.expendKey.indexOf(item.key) > -1
                      ? styles.treeSweitch
                      : styles.treeSweitchClose
                  }
                  src="/images/homepage/sysmenus/小三角up.png"
                />
              </span>
            </div>
            {this.state.expendKey.indexOf(item.key) > -1 && (
              <ul>{this.renderTreeNodes(item.children)}</ul>
            )}
          </li>
        );
      }
      return (
        <li
          key={item.key}
          className={
            item.key === this.state.defalutKey
              ? styles.treenode_Child_Select
              : styles.treenode_Child
          }
          onClick={e => {
            e.preventDefault();
            this.selectNode(item);
          }}
        >
          <span className={styles.treeIcon}>
            <img src={item.img || '/images/homepage/sysmenus/菜单.png'} />
          </span>
          <span className={styles.treeTitle}>{item.title}</span>
        </li>
      );
    });

  render() {
    const { sysmenus } = this.props;
    return (
      <div className={styles.susmenus}>
        <ul style={{ cursor: 'pointer' }}>{this.renderTreeNodes(sysmenus)}</ul>
      </div>
    );
  }
}
